<template>
  <draw-component
    :drawer-visible="state.show"
    size="720px"
    title="角色详情"
    :show-bottom-btn="false"
    @close-drawer="handleClose()"
  >
    <div class="my-detail-box df aic">
      <div class="detail-item">
        <span class="label">角色编码:</span>
        <span class="text">{{ state.formData.roleId }}</span>
      </div>
      <div class="detail-item">
        <span class="label">角色名称:</span>
        <span class="text">{{ state.formData.roleName }}</span>
      </div>
    </div>
    <div class="my-tab-box df aic">
      <div class="tab-item" :class="state.tabId === '1' ? 'active' : ''" @click="state.tabId = '1'">
        角色用户
      </div>
      <div class="tab-item" :class="state.tabId === '2' ? 'active' : ''" @click="state.tabId = '2'">
        角色功能
      </div>
    </div>
    <table-page-content
      v-show="state.tabId === '1'"
      :table-data="state.formData.roleUserResponseDtoList"
      :table-headers="detailHeaders"
      :table-height="'60vh'"
      :is-pager="false"
      :is-slot-num="false"
    >
    </table-page-content>
    <el-tree
      v-show="state.tabId === '2'"
      ref="treeRef"
      class="permission-tree"
      :data="state.formData.roleMenuResponseDtoList"
      :props="state.props"
      :default-expand-all="true"
      node-key="id"
    />
    <template #footBtn>
      <el-button class="btn cancel" @click="handleClose">关闭</el-button>
    </template>
  </draw-component>
</template>

<script setup lang="ts">
import { getRoleDetailById } from '../api'
import { detailHeaders } from '../config'
import { useProxy } from '@/utils/proxy'
const { proxy } = useProxy()
const treeRef = ref()
const state = reactive({
  tabId: '1',
  currRoleId: '',
  show: false,
  formData: {
    roleUserResponseDtoList: [],
    roleMenuResponseDtoList: [],
    roleName: '',
    roleId: ''
  },
  props: {
    label: 'permissionName',
    children: 'children'
  }
})
// 关闭回调
const handleClose = () => {
  state.currRoleId = ''
  state.formData = {
    roleUserResponseDtoList: [],
    roleMenuResponseDtoList: [],
    roleName: '',
    roleId: ''
  }
  state.show = false
}
// 获取详情
const getRoleDetail = async () => {
  let { data } = await getRoleDetailById<any>(state.currRoleId)
  const form = {} as any
  Object.keys(state.formData).forEach((item, index) => {
    form[item] = data[item] ?? ''
  })
  state.formData = form
}
defineExpose({ state, getRoleDetail })
</script>

<style lang="scss" scoped>
.permission-tree {
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
  height: 60vh;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
